<template>
  <ul class="proList" :class="'cols_' + num"  >
      <li class="proItem" v-for="item of proList" :key="item.proid" @click="goDetail(item.proid)" >
          <div class="itemImage">
              <van-image :src="item.img1"></van-image>
          </div>
          <div class="itemInfo">
              <div class="proname van-multi-ellipsis--l2">
                  {{item.proname }}
              </div>
              <span class="span-title">家电类</span>
              <span class="span-title">创意</span>
              <span class="span-title">套装</span>
              <div class="price">
                  ¥{{item.originprice}}
              </div>
              <span class="span-name">
                  智想（zhixiang）京东自营旗舰店
              </span>
          </div>
      </li>

      <!-- <li class="proItem" >
          <div class="itemImage">
              <van-image src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576"></van-image>
          </div>
          <div class="itemInfo">
              <div class="proname van-multi-ellipsis--l2">
                  产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
              </div>
              <div class="price">
                  ¥111
              </div>
          </div>
      </li> -->
      <div class="changeIcon" @click="num = num === 1 ? 2 : 1">
        <van-icon name="apps-o" v-if="num === 1" size="32"/>
        <van-icon name="bars" v-else size="32"/>
      </div>   
  </ul>
</template>

<script>

import Vue from 'vue'
import {Image as VanImage , Icon} from 'vant'
Vue.use(VanImage)
Vue.use(Icon)


export default {
    data(){
        return {
            num:1
        }
    },
    props:['proList'],
    methods: {
        goDetail(proid){
            // this.$router.push('/detail/?' + proid)
         
            this.$router.push({name:'detail' , params:{proid} } )

            console.log(proid,222);
        }
    }
}
</script>

<style lang="stylus" scoped>
.proList
    &.cols_1
        .proItem
            height: 1rem
            display: flex
            background-color: #fff
            .itemImage
                width: 1rem
                height: 1rem
                box-sizing border-box
                .van-image
                    width: 0.94rem
                    height: 0.94rem
                    margin: 0.03rem
                    img
                        width: 0.94rem
                        height: 0.94rem
                        margin: 0.03rem
                        display: block
                        box-sizing: border-box
            .itemInfo
                position relative
                flex: 1
                height: 1rem
                box-sizing: border-box
                padding: 5px 10px
                border-bottom: 1px solid #ccc
                .proname
                    font-size: 14px
                    margin-bottom: 3px
                .span-title
                    padding: 0 5px;
                    border-radius: 1px;
                    font-size: 10px;
                    height: 15px;
                    line-height: 15px;
                    color: #999;
                    background-color: #f2f2f7;
                    margin: 0 2.5px
                .price
                    color #cc0000
                    font-size: 16px
                    margin-top: 6px
                .span-name
                    position: absolute
                    color: #999;
                    bottom: 5px
                    
    &.cols_2
        display: flex
        flex-wrap wrap
        .proItem
            width: 48%
            margin: 3px 1%
            height: 2.7rem
            .itemImage
                height: 1.7rem
                width: 100%
                .van-image
                    width: 100%
                    height: 100%
                    overflow: hidden
                    border: 1px solid #ccc
                    img
                        width: 100%
                        height: 100%
                        display: block
            .itemInfo
                height: 1rem
                position relative
                padding: 3px 10px
                background-color: #fff 
                .span-title
                    padding: 0 5px;
                    border-radius: 1px;
                    font-size: 10px;
                    height: 15px;
                    line-height: 15px;
                    color: #999;
                    background-color: #f2f2f7;
                    margin: 0 2.5px   
                .proname
                    font-size: 13px
                    height: 32px
                    margin-bottom: 6px
                .price
                    margin-top:10px 
                    color #cc0000
                    font-size: 16px
                .span-name
                    position: absolute
                    color: #999;
                    bottom: 5px
                    width: 80%
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    
    .changeIcon
        position: fixed
        width: 32px
        height: 32px
        border-radius: 50%
        border: 1xp solid #ccccccc
        display: flex
        justify-content: center
        align-items: center
        bottom: 60px
        right: 10px
        background-color: #fff
</style>